<template>

    <el-form :model="detailForm" ref="detailForm" :inline="false" >
      <!--备注-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">备注</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="商业险车辆总台数:" prop="syxCarCount">
              <span>{{ detailForm.syxCarCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交强险车辆总台数:">
              <span>{{ detailForm.jqxCarCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交强险费用合计:">
              <span>{{ detailForm.jqxTotalPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车船税费用合计:">
              <span>{{ detailForm.carTaxTotalPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商业险费用合计:">
              <span>{{ detailForm.syxTotalPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他合计:">
              <span>{{ detailForm.qtTotalPrice }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="投保单:" prop="policyOss"
                          label-position="top"
                          :rules="{required:true,messages:'上传保单',trigger:'change'}">


              <image-common v-model="detailForm.policyOss" :limit="20" :disabled="!isEdit"  :upType="2" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="特殊事项说明:">
              <el-input v-if="isEdit" v-model="detailForm.remark" placeholder="请输入特殊事项说明" :rows="4"
                        type="textarea"></el-input>
              <span v-else>{{ detailForm.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

    </el-form>

</template>

<script>
export default {
  name: "remark", //保司报价
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "left";
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (newValue) {
          let tableData = JSON.parse(JSON.stringify(newValue.tableData))
          this.handleCount(tableData)

        }
      },
      deep: true,
      immediate: true,

    }
  },
  data() {
    return {
      isShow: true,
      obj: {
        syxCarCount: 0,
        jqxCarCount: 0,
        jqxTotalPrice: 0,
        carTaxTotalPrice: 0,
        syxTotalPrice: 0,
        qtTotalPrice: 0,
      },
      bool: false,
      activityName: '',
      formId: '',
    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
    valid() {
      return new Promise((resolve) => {
        if (this.bool) {
          this.$refs.detailForm.validate((valid) => {
            resolve(valid);
          });
        } else {
          resolve(true);
        }
      });
    },
    handleCount(val) {
      let arr = val
      this.obj.syxCarCount = arr.length
      this.obj.jqxCarCount = arr.length
      this.obj.jqxTotalPrice = 0
      this.obj.carTaxTotalPrice = 0
      this.obj.syxTotalPrice = 0
      this.obj.qtTotalPrice = 0
      for (let i = 0; i < arr.length; i++) {
        this.obj.jqxTotalPrice += Number(arr[i].jqxAmount)
        this.obj.carTaxTotalPrice += Number(arr[i].carTax)
        this.obj.syxTotalPrice += Number(arr[i].syxAmount)
        this.obj.qtTotalPrice += Number(arr[i].qtPrice)
      }
      this.value.syxCarCount = this.obj.syxCarCount
      this.value.jqxCarCount = this.obj.jqxCarCount
      this.value.jqxTotalPrice = this.obj.jqxTotalPrice
      this.value.carTaxTotalPrice = this.obj.carTaxTotalPrice
      this.value.syxTotalPrice = this.obj.syxTotalPrice
      this.value.qtTotalPrice = this.obj.qtTotalPrice
      this.$forceUpdate()
    }
  },
};
</script>

<style scoped lang="scss">
</style>


